<template>
  <el-dialog
    title="公告详情"
    :visible.sync="visible"
    width="1080px"
    custom-class="scrollable-dialog"
    :close-on-click-modal="false"
  >

  <table class="custom-table map10">
        <tr>
          <td class="tr-title" align="left">公告标题</td>
          <td>{{ title }}</td>
        </tr>
        <tr>
          <td class="tr-title">公告类型</td>
          <td>{{ noticeType }}</td>
        </tr>
        <tr>
          <td class="tr-title" align="left">公告内容</td>
          <td><span v-html="content"></span></td>
        </tr>
         <tr>
          <td class="tr-title" align="left">附件</td>
          <td>
               <div class="duo-file">
                <div v-for="(file, index) in fileList" :key="index" class="mmts">
                    <template v-if="isImage(file.urls)">
                    <el-image
                        style="width: 40px; height: 40px;margin-right: 6px"
                        :src="file.urls"
                        :preview-src-list="[file.urls]"
                        fit="cover"
                    ></el-image>
                    </template>
                    <template v-else-if="isPDF(file.urls)">
                    <a :href="file.urls" target="_blank"
                        ><img
                        style="width: 40px; height: 40px;margin-right: 6px"
                        src="~@/assets/pdf_file.png"
                    />
                    <span style="display: block;">{{ file.name }}</span>
                  </a>
                    </template>
                    <template v-else>
                    <label @click="dowmWord(file)"><img
                        style="width: 40px; height: 40px;margin-right: 6px"
                        src="~@/assets/word_file.png"
                    /></label>
                    <span style="display: block;" @click="dowmWord(file)">{{ file.name }}</span>
                    </template>
                </div>
              </div>
          </td>
        </tr>
    </table>
    <template v-if="isOpen">
      <el-form :inline="true" size="small" :model="formInline" ref="formInline" style="margin-top:40px;">
        <el-form-item label="状态" prop="isRead">
           <el-select v-model="formInline.isRead" placeholder="阅读状态">
            <el-option label="已读" value="1"></el-option>
            <el-option label="未读" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期" prop="time">
          <el-date-picker
            v-model="formInline.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="loadList(true)">搜索</el-button>
           <el-button type="primary" icon="el-icon-setting" @click="reset('formInline')">重置</el-button>
        </el-form-item>
        <!-- <el-form-item label="选择">
          <el-tag
              v-for="tag in selectItem.slice(0,5)"
              :key="tag.id"
              closable
              @close="handleUserClose(tag)">
              {{ tag.name }}
            </el-tag>
          <template v-if="selectItem.length > 5">
            <el-popover
              placement="top"
              width="600"
              trigger="click">
            <el-tag
              v-for="tag in selectItem"
              :key="tag.id"
              closable
              @close="handleUserClose(tag)"
              style="margin:6px;"
            >
              {{ tag.name }}
            </el-tag>
              <el-button slot="reference" style="margin-right: 10px;" type="text" size="mini">...查看更多</el-button>
            </el-popover>
          </template>
           <el-button type="primary" size="mini" @click="stateChange(2)">供应商</el-button>
           <el-button type="primary" size="mini" @click="stateChange(1)">内部人员</el-button>
        </el-form-item> -->
      </el-form>
      <el-table :data="tableData" ref="table" border stripe>
        <el-table-column label="序号" width="50" :index="1">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="name" show-overflow-tooltip resizable label="姓名" />
        <el-table-column prop="department" show-overflow-tooltip resizable label="部门或供应商" />
        <el-table-column prop="isRead" show-overflow-tooltip resizable label="是否阅读">
           <template slot-scope="scope">
                <el-tag v-if="scope.row.isRead == 1">已读</el-tag>
                <el-tag v-if="scope.row.isRead == 0" type="danger">未读</el-tag>
            </template>
          </el-table-column>
        <el-table-column prop="readTime" show-overflow-tooltip resizable label="阅读时间" :formatter="formatDate" />
      </el-table>
       <el-row>
        <el-pagination
          class="page-footer"
          background
          layout="total,prev,pager,next,sizes,jumper"
          :total="models.total"
          :page-sizes="[10, 20, 30, 40, 50]"
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
        />
      </el-row>
    </template>

    <userList ref="createUserList" @onOk="checkOk" />
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import moment from "moment";
import { mapGetters, mapActions } from "vuex";
import { getNoticeReadPage } from "@/api/supplier_api";
import UserList from './userList.vue'
export default {
  components: {
    UserList
  },
  data() {
    return {
      visible: false,
      isOpen:false,
      models: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
       formInline: {
         isRead: "",
         state: '',
        receiverId:'',
        time: []
      },
      id:'',
      tableData: [],
      title: "",
      noticeType:"",
      content: "",
      fileList: [],
      selectItem:[]
    };
  },
  computed: {
    ...mapGetters(["findType"])
  },
  methods: {
    stateChange(e) {
      this.$refs.createUserList.openList(e)
    },
    checkOk(arr) {
       this.selectItem = arr
    },
    setOther() {
      this.selectItem = []
      this.fileList = []
      this.formInline = {
        isRead: "",
        state: 1,
        receiverId:'',
        time: []
      }
    },
    openDetail(row, isOpen) {
      this.isOpen = isOpen
      this.title = row.title;
      this.content = row.content;
      this.noticeType = row.noticeType;
      this.setOther() //重置查询条件
      this.id = row.id
      if (row.attachment) {
        this.fileList = JSON.parse(row.attachment);
      }
      if (isOpen) {
         this.loadList(true)
      }
      this.visible = true
    },
    async loadList(formData) {
      let param = {}
      if (formData) {
        this.models.pageNum = 1
        this.models.pageSize = 10
      }
      if (this.formInline.time && this.formInline.time.length) {
        param.publishStartTime = this.formInline.time[0];
        param.publishEndTime = this.formInline.time[1];
      }
      param.isRead = this.formInline.isRead
      param.notificationId = this.id
      param.pageNum = this.models.pageNum;
      param.pageSize = this.models.pageSize;
      const { code, data } = await getNoticeReadPage(param);
      if (code == 200) {
        this.tableData = data.list;
        this.models.total = data.total;
      }
    },
    handlePageChange(page) {
      this.params.pageNum = page;
      this.loadList();
    },
    handleSizeChange(page) {
      this.params.pageSize = page;
      this.loadList();
    },
     reset(formName){
       this.$refs[formName].resetFields();
      this.selectItem = []
      this.loadList(true);
      },
    isImage(file) {
      return /\.(jpg|jpeg|png|gif|webp)$/i.test(file);
    },
    isPDF(file) {
      return /\.pdf$/i.test(file);
    },
    async dowmWord(file) {
       const link = document.createElement('a');
        link.href = file.urls
        link.download = file.name
        link.style.display = 'none';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      URL.revokeObjectURL(file.urls);
    },
      formatDate(row, column) {
      const date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD  HH:mm:ss");
    }
  }
};
</script>
<style scoped>
p{
    margin: 0;
}
.duo-file{
  display: flex;
    align-items: center;
}
.mmts{
  text-align: center;
  cursor: pointer;
}
.mmts + .mmts{
  margin-left: 15px;
}
.mmts:hover span{
  color: #409EFF;
}
</style>